Geography 485L/585L - Internet Mapping

Week 1 - Module 1 - Introduction and Outline

Overview

Introductions

Class Topics

Basics

Outline

What is Internet Mapping

Extended Desktop Mapping

Use of open standards based remote data and map services in desktop applications

Geospatial Data Sharing

Establishing open standards based services to share geospatial data and mapping capabilities over the Internet

Web-client Mapping

The delivery of mapping and geospatial data tools through web browsers, again based upon open standards

Definitions

Internet

The global computer network of computers that typically connect with each other over TCP/IP

World Wide Web

The subset of applications that are run over the Internet, typically using the HTTP protocol in combination with data (HTML, XML, XHTML), presentation (CSS), and behavior (JavaScript) components

Mapping

The generation of cartographic products that include map images (pictures of geospatial data) and other elements (e.g. legends, tools, scale information, north-arrow)

Definitions

Analysis

The development of models (statistical and otherwise) that enable the exploration of geospatial data and testing of hypotheses using those data

Open Standards

While the definition varies from one organization to the next, Open Standards are often characterized by the following:

Definitions

Interoperability

Ability of systems to share data and information with each other

COTS

Commercial Off-the-Shelf Software. Applications that are “purchased” from vendors, often with license terms that restrict the use the software to the specific platform for which it is licensed. Often comes with implicit or explicit technical support

Open Source

Software licensed under terms that are consistent with the Open Source definition, which includes access to source code, and freedom to modify and redistribute

Definitions

Data

Actual values associated with geographic locations. For example - numeric elevation values associated with locations within a Digital Elevation Model.

Metadata

Data about a particular data product or service. Metadata provide critical documentation that supports the discovery and use of data products and data and mapping services

Tools

Computer Hardware Requirements

Software Requirements

Week 2 - Module 2a - Web-based Mapping Clients. HTML, CSS & Javascript

Overview

Web Development

Parts of a Web Page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
    <!-- The HTML block is the container for all of your page content -->
    <head>
        <!-- The head is where you include pointers to external resources 
        (i.e. style sheets and javascript files), blocks of Javascript code
        , styles, etc.  -->
        <title>The page title also goes in here</title>
    </head>
    <body>
        <!-- The body is where you put all of the content for the page 
        (i.e. the material that will be displayed in the web browser)  -->
        <h1>Headers</h1>
        <div>Generic blocks of content</div>
        <p>Paragraphs</p>
        <table>Tables</table>
        <img ...>Images</img>
        <form ...>Forms</form>
        <ul>Unordered Lists</ul>
        <ol>Ordered Lists</ol>
        <li>List Items</li>
        
        <!-- Javascript can go here as well -->
    </body>
</html>

Link to example/Preview

Web Site Components - Structure

Content is defined in terms of the structural elements available in HTML/XHTML

Web Site Components - Presentation

Modifications to default rendering of HTML/XHTML elements are made through styles defined in CSS

CSS Selectors

Selectors may be based on several criteria

Web Site Components - Behavior

The most interoperable language for adding dynamic behavior to web sites is Javascript - supported by most browsers on most operating systems

Simple Web Page

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>This is a simple web page</title>
    </head>
    <body>
        <h1>They don't get any simpler than this!</h1>
        <p>OK, not much simpler than this.</p>
        <p>Hello World?</p>
    </body>
</html>

link to example/Preview

Simple Web Page with CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>This is a simple web page - with styling</title>
        <style type="text/css">
            h1 {color:blue; font-size:large}
            p.para {color:#777777; font-size:small}
            #annoying {color:red; text-decoration:line-through}
        </style>
    </head>
    <body>
        <h1>They don't get any simpler than this!</h1>
        <p class="para">OK, not much simpler than this.</p>
        <p id="annoying" class="para">Hello World?</p>
    </body>
</html>

link to example/Preview

Simple Web Page with Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>This is a simple web page with Javascript</title>
        <script type="text/javascript">
            function genericAlert() {
                alert("You just did something ...")
                document.getElementById("clickMe").style.color = "red"
            }
        </script>
    </head>
    <body>
        <h1>They don't get any simpler than this!</h1>
        <p>OK, not much simpler than this.</p>
        <p>Hello World?</p>
        <p id="clickMe" onclick="genericAlert();">What happens when you click me?</p>
    </body>
</html>

link to example/Preview

More Complete Web Page Example

NAWRS Mapper. HTML: 39 Lines; CSS: 136 Lines; core.js: 515 Lines + Google Maps API and JQuery Framework
NAWRS Mapper. HTML: 39 Lines; CSS: 136 Lines; core.js: 515 Lines + Google Maps API and JQuery Framework

Week 3- Module 2a - Web-based Mapping Clients. Google Maps API

Outline

What is an API

An Application Programming Interface (API) is a particular set of rules and specifications that a software program can follow to access and make use of the services and resources provided by another particular software program that implements that API. It serves as an interface between different software programs and facilitates their interaction, similar to the way the user interface facilitates interaction between humans and computers. -- From Wikipedia: http://en.wikipedia.org/wiki/Api

Google Maps API Version

Reference Information

Google Maps API Family
http://code.google.com/apis/maps/
Javascript API Home Page
http://code.google.com/apis/maps/documentation/javascript/
Javascript API v3 Tutorial Page
http://code.google.com/apis/maps/documentation/javascript/tutorial.html

Key Components

Types (required)
ROADMAP
SATELLITE
HYBRID
TERRAIN
Latitude and Longitude (required)
specification of where the map should initially be centered
Zoom Level (required)
0=global, higher values increasingly local. Limited by map type

Controls

Overlays

Overlay Types documentation

Marker
points depicted by specified or defined icons at locations within the map
Polyline
linear features defined by multiple points with a defined style for the line
Polygon
closed features defined by multiple points. Supports multi-polygons, and donuts. Line and fill styles may be specified.
(Ground) Overlay Maps
Image-based map layers that replace or overlay Google layers - registered to the map coordinates

Overlays (continued)

Info Windows
floating content windows for displaying content defined as HTML, a DOM element, or text string
Layers
Grouped display content assigned to a specific layer type: Data (including GeoJSON), KmlLayer (& GeoRSS), Heatmap, FusionTablesLayer, TrafficLayer, TransitLayer BicyclingLayer
Custom Overlays
definition of programmatically controlled layers

Services

Services

Events

Examples

Simple - Roadmap

gmaps01.html preview 

Simple - Roadmap Code

gmaps01.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_01.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* You must set the height of either the 'html' or 'body' elements for some 
    browsers to properly render the map with a hight taller than 0px */
html { 
    height: 100% }

body { 
    height: 100%; 
    margin: 0px; 
    padding: 0px; 
    background-color: black; 
    color: #CCCCCC;
    text-align: center}
    
#map_canvas { 
    width:90%; 
    height:80%; 
    margin-left:auto; 
    margin-right: auto }
    
.infoBox { 
    color:black }

mapPage_01.js

1
2
3
4
5
6
7
8
9
10
11
12
function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Satellite

gmaps02.html preview 

Simple - Satellite Code

gmaps02.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_02.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_02.js

1
2
3
4
5
6
7
8
9
10
11
12
function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Hybrid

gmaps03.html preview 

Simple - Hybrid Code

gmaps03.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_03.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_03.js

1
2
3
4
5
6
7
8
9
10
11
12
function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Terrain

gmaps04.html preview 

Simple - Terrain Code

gmaps04.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_04.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_04.js

1
2
3
4
5
6
7
8
9
10
11
12
function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Hybrid - Zoomed

gmaps05.html preview 

Simple - Hybrid - Zoomed Code

gmaps05.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_05.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_05.js

1
2
3
4
5
6
7
8
9
10
11
12
function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var mapOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"),
        mapOptions);
}

Simple - Zoomed - Modified Controls

gmaps06.html preview 

Simple - Zoomed - Modified Controls Code

gmaps06.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_06.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_06.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function initialize() {
var classroom = new google.maps.LatLng(35.084280,-106.624073)
var myOptions = {
    zoom: 18,
    center: classroom,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    zoomControl: true,
    zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL},
    mapTypeControl: true,
    mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    streetViewControl: false
};
var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions);
}

Markers

gmaps07.html preview 

Markers Code

gmaps07.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_07.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_07.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);

    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);

    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map);
}

Polyline

gmaps08.html preview 

Polyline Code

gmaps08.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_08.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_08.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);

    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);

    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map); 

    var officeVisitCoordinates = [
        office,
        new google.maps.LatLng(35.084445,-106.624327),
        new google.maps.LatLng(35.084309,-106.624308),
        classroom
        ];
    var officePath = new google.maps.Polyline({
        path: officeVisitCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });
    officePath.setMap(map)
}

Polygon

gmaps09.html preview 

Polygon Code

gmaps09.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_09.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_09.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);
    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);
    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map); 
    var buildingCoordinates = [
        new google.maps.LatLng(35.084498,-106.624921),
        new google.maps.LatLng(35.084558,-106.624911),
        new google.maps.LatLng(35.084566,-106.624970),
        new google.maps.LatLng(35.084609,-106.624966),
        new google.maps.LatLng(35.084544,-106.624383),
        new google.maps.LatLng(35.084438,-106.624317),
        new google.maps.LatLng(35.084384,-106.623922),
        new google.maps.LatLng(35.084164,-106.623970),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084391,-106.624284)
        ];
    var bldgPoly = new google.maps.Polygon({
        paths: buildingCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });
    bldgPoly.setMap(map)
}

Adding an Info Window

gmaps10.html preview 

Adding an Info Window Code

gmaps10.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_10.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize 
            function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be 
            for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_10.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var office = new google.maps.LatLng(35.084506,-106.624899)
    var myOptions = {
        zoom: 18,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.HYBRID
        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);
    var classroomMarker = new google.maps.Marker({
        position: classroom,
        title:"Geography 485L/585L Classroom, Bandelier East, Room 106"
        });
    classroomMarker.setMap(map);
    var officeMarker = new google.maps.Marker({
        position: office,
        title:"Office, Bandelier West, Room 107"
        });
    officeMarker.setMap(map); 
    var buildingCoordinates = [
        new google.maps.LatLng(35.084498,-106.624921),
        new google.maps.LatLng(35.084558,-106.624911),
        new google.maps.LatLng(35.084566,-106.624970),
        new google.maps.LatLng(35.084609,-106.624966),
        new google.maps.LatLng(35.084544,-106.624383),
        new google.maps.LatLng(35.084438,-106.624317),
        new google.maps.LatLng(35.084384,-106.623922),
        new google.maps.LatLng(35.084164,-106.623970),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084214,-106.624324),
        new google.maps.LatLng(35.084391,-106.624284)
        ];
    var bldgPoly = new google.maps.Polygon({
        paths: buildingCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
        });
    bldgPoly.setMap(map);
    var classInfoContent = '<div class="infoBox">' +
        '<p>This is the location for the Geography 485L/585L class</p>' +
        '</div>'
    var classInfoWindow = new google.maps.InfoWindow({
        content: classInfoContent
        });
    google.maps.event.addListener(classroomMarker, 'click', function() {
        classInfoWindow.open(map,classroomMarker);
        });
}

Week 4 - Module 2a - Web-based Mapping Clients. Google Maps API (pt. 2)

Overview

Getting Started with Styled Maps - Video

Styled Maps Documentation | Styled Maps Wizard

Google Maps Styled Maps Wizard link
Google Maps Styled Maps Wizard link

Map Example: Simple - Styled

gmap_styled.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/mapPage.css">
    </head>

    <body>
        <h1>Sample Map - Styled (POIs Highlighted)</h1>
        <div id="map_canvas"></div>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_styled.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize function when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should be for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

mapPage_styled.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function initialize() {
    var classroom = new google.maps.LatLng(35.084280,-106.624073)
    var myOptions = {
        zoom: 8,
        center: classroom,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles: [
          {
            featureType: "water",
            stylers: [
              { visibility: "on" },
              { hue: "#0008ff" }
            ]
          },{
            featureType: "road.highway",
            stylers: [
              { hue: "#ff1a00" }
            ]
          },{
            featureType: "road.arterial",
            stylers: [
              { hue: "#ffa200" },
              { visibility: "simplified" }
            ]
          },{
            featureType: "road.local",
            stylers: [
              { visibility: "off" }
            ]
          },{
            featureType: "administrative",
            stylers: [
              { visibility: "simplified" }
            ]
          },{
            featureType: "poi",
            stylers: [
              { visibility: "on" },
              { hue: "#00ffff" }
            ]
          },{
            featureType: "poi",
            stylers: [
              { visibility: "on" }
            ]
          }
        ]

        };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), 
        myOptions);
}

Google I/O 2011: Managing and visualizing your geospatial data with Fusion Tables - Video

Some particularly relevant sections: Introduction (0:00 - 10:30) | Google Maps API Integration (21:40 - 34:42) | Summary and Links (52:00 52:40)

Fusion Tables Documentation/Help

Google Fusion Tables Introduction Video link
Google Fusion Tables Introduction Video link

Bringing It All Together

gmaps_events.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/event_mapPage.css">
        <title>Karl's Event Diary</title>
    </head>

    <body>
        <h1>My diary of endurance events that I've participated in since joining Team in Training
        </h1>
        
        <p>In 2008 Cynthia and I joined the Leukemia and Lymphoma Society's 
        (<a href="http://www.lls.org/">LLS</a>) Team in Training 
        (<a href="http://www.teamintraining.org/">TNT</a>, 
        <a href="http://youtu.be/GMSKG8L6K78">info video</a>) program as 
        participants to train for the Animas Valley/Steamworks Half Marathon 
        and raise money for blood cancer research and patient services. In spite of 
        our not having any direct connection to blood cancer (at that time), 
        we found the goals of LLS admirable,  the combined training and fund-raising 
        program of TNT a great idea, and have made many new friends over the many 
        seasons that we've been involved with TNT.</p>
        
        <p>From 2008 through early 2015 we  continued to volunteer with TNT, as 
        participants, mentors, and since 2010 I was a coach (check out my 
        <a href="http://youtu.be/GMSKG8L6K78#t=2m13s">half-second</a> of fame in the 
        info video) for TNT with an emphasis on training walkers for full- or 
        half-marathons. This page provides a summary of the events that I've participated 
        in in some capacity since we became involved with TNT. </p>
        
        <div id="event-map" name="event-map"></div>

        <h2>
            <span class="date">11/13/2015</span> 
            Avengers Half Marathon 
            <span class="time">3:17:55</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[5].point, 12)">map</a>)
        </h2>

        <h2>
            <span class="date">1/11/2015</span> 
            Disney World  Marathon (Goofy - Day 2)
            <span class="time">6:21:01</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/10/2015</span> 
            Disney World Half Marathon (Goofy - Day 1)
            <span class="time">2:45:55</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <h2>
            <span class="date">10/19/2014</span> 
            Duke City Half Marathon 
            <span class="time">2:45:17</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[0].point, 11)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>
        <h2>
            <span class="date">2/23/2014</span> 
            Princess Half Marathon
            <span class="time">3:07:11</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <h2>
            <span class="date">2/22/2014</span> 
            Princess Enchanted 10k
            <span class="time">1:42:43</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <h2>
            <span class="date">9/1/2013</span> 
            Disneyland Half Marathon 
            <span class="time">2:56:57</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[5].point, 12)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/13/2013</span> 
            Disney World  Marathon (Goofy - Day 2)
            <span class="time">6:46:57</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/12/2013</span> 
            Disney World Half Marathon (Goofy - Day 1)
            <span class="time">3:22:48</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>
    
        <h2>
            <span class="date">9/29/2012</span> 
            Hot Chocolate 15k 
            <span class="time">1:56:46</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[6].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">6/9/2012</span> 
            Animas Valley/Steamworks Half Marathon 
            <span class="time">no time: coached</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[1].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/9/2012</span> 
            Disney World  Marathon (Goofy - Day 2)
            <span class="time">6:56:28</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/8/2011</span> 
            Disney World Half Marathon (Goofy - Day 1)
            <span class="time">3:29:00</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">6/19/2010</span> 
            Animas Valley/Steamworks Half Marathon 
            <span class="time">no time: coached</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[1].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">6/6/2010</span> 
            San Diego Rock 'n' Roll Marathon 
            <span class="time">no time: coached</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[2].point, 11)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">10/18/09</span> 
            Nike Women's Marathon 
            <span class="time">7:13:05</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[3].point, 12)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">9/6/2009</span> 
            Disneyland Half Marathon 
            <span class="time">3:43:05</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[5].point, 12)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">1/11/2009</span> 
            Disney World Marathon 
            <span class="time">6:57:42</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[4].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">10/19/2008</span> 
            Duke City Half Marathon 
            <span class="time">3:09:42</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[0].point, 11)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

        <h2>
            <span class="date">6/21/2008</span> 
            Animas Valley/Steamworks Half Marathon 
            <span class="time">3:14:52</span> 
            (<a href="#event-map" onclick="recenter(map, eventPlaces[1].point, 10)">map</a>)
        </h2>
        <p class="eventDescription">blah, blah, blah ...</p>

    </body>

    <!-- Let's put our JavaScript down here --------------------------------------------->
        <!-- Load the external JavaScript file with the map definition code -->
        <script src="js/mapPage_events.js"></script>
        
        <!-- Load the API in asynchronous mode and execute the initialize function
             when done -->
        <!-- The optional 'key-<API Key>' parameter is not used here but should 
            be for a production map -->
        <script async defer 
            src="https://maps.googleapis.com/maps/api/js?callback=initialize">
        </script>
    </body>
</html>

gmaps_events.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
var map;
var eventPlaces;

function initialize() {
    // Define a set of global coordinates for use throughout the web site
    // Place coordinates derived from GNIS database: http://geonames.usgs.gov/pls/gnispublic
    eventPlaces = [
        {
            name: "Albuquerque", 
            point: new google.maps.LatLng(35.0889356,-106.5747462),
            label: "Albuquerque: Duke City Half Marathon"
        }, 
        {
            name: "Durango", 
            point: new google.maps.LatLng(37.2752800,-107.8800667),
            label: "Durango: Animas Valley/Steamworks Half Marathon"
        },
        {
            name: "San Diego", 
            point: new google.maps.LatLng(32.7153292,-117.1572551),
            label: "San Diego: San Diego Rock 'n' Roll Marathon"
        },
        {
            name: "San Francisco", 
            point: new google.maps.LatLng(37.7749295,-122.4194155),
            label: "San Francisco: Nike Women's Marathon"
        },
        {
            name: "Orlando", 
            point: new google.maps.LatLng(28.5383355,-81.3792365),
            label: "Orlando: Walt Disney World half- and full-marathon"
        },
        {
            name: "Anaheim", 
            point: new google.maps.LatLng(33.8352932,-117.9145036),
            label: "Anaheim: Disneyland Half Marathon"
        },
        {
            name: "Albuquerque", 
            point: new google.maps.LatLng(35.0889356,-106.5747462),
            label: "Hot Chocolate 15k"
        } 

    ];

    var myOptions = {
        zoom: 4,
        center: eventPlaces[0].point,
        mapTypeId: google.maps.MapTypeId.ROADMAP};

    map = new google.maps.Map(
        document.getElementById("event-map"), 
        myOptions);

    addMarkers(map,eventPlaces)
}

function recenter(mapName, latlon, zoomLevel) {
    mapName.setCenter(latlon);
    mapName.setZoom(zoomLevel)
}

function addMarkers(mapName, markerArray) {
    for (index = 0; index < markerArray.length; index++) {
        myMarker = new google.maps.Marker({
            position: markerArray[index].point,
            title: markerArray[index].label
        });
        myMarker.setMap(mapName)
    }
}

Week 5 - Module 3 - GIS and Services Oriented Architectures

Overview

Geographic Information Systems

Data Types - Vector

For example, a census vector data product might include the geometries that define census tracts and attributes associated with each geometry: population, income, etc.

Data Types - Raster

Accessing and Processing Raster and Vector Data

Accessing and Processing Raster and Vector Data - Programmatically

OGR
vector data access and information
GDAL
raster data access and information

These libraries are the data access and processing foundation for a growing number of open source and commercial mapping systems

Information and documentation: GDAL Home Page | OGR Home Page

Coordinate Systems/Projections

EPSG Codes

Projection Parameters

The parameters that define a map projection may be looked up in a number of online locations:

EPSG registry
Helpful if you already know the EPSG code of the projection you are looking for - http://www.epsg-registry.org/
GeoTIFF Projection List
Helpful if you know the name of one of the broadly used projections - uneven performance of links - http://www.remotesensing.org/geotiff/proj_list/
SpatialReference.org
Decent search tool, includes non-EPSG as well as EPSG projection information, multiple descriptions of projection parameters - http://spatialreference.org/

Services Oriented Architectures

Where have we come from - ENIAC (1946)

ENIAC Computer
ENIAC Computer

Where have we come from - Early Client-Server Computing (1960s)

IBM 704 Mainframe Computer
IBM 704 Mainframe Computer
Model 33 ASR Teletype
Model 33 ASR Teletype
TeleVideo 925 ASCII Terminal
TeleVideo 925 ASCII Terminal

Where have we come from - Personal Computers (1970s)

IBM 5150 Personal Computer
IBM 5150 Personal Computer
Apple I Personal Computer
Apple I Personal Computer

Now - Network computing

World Internet Hosts 1/94-1/13. Image courtesy IWS - http://www.isc.org/services/survey/
World Internet Hosts 1/94-1/13. Image courtesy IWS - http://www.isc.org/services/survey/

Network Computing Timeline

In a Phrase ...

The current networking computing model consists of Components Interacting with Each Other

So - We Need to Answer the Following Questions

What are components?

What does it mean to interact?

The Big Picture - Services Oriented Architectures

SOA Illustration
SOA Illustration

The Pieces - Components

Key Components - Data

Database systems

Key Components - Data

File-based data

Key Components - Processing Services

Key Components - Clients

The Glue - Interoperability Standards / Service Interfaces

Open Geospatial Consortium Interoperability Standards

Open Geospatial Consortium (OGC) Standards

Comparison of OGC Service Models

Comparison of OGC Service Models
Comparison of OGC Service Models

OGC Web Map Services (WMS)

WMS request result for Bernalillo County Landsat Mosaic from NM RGIS link
WMS request result for Bernalillo County Landsat Mosaic from NM RGIS link
http://gstore.unm.edu/apps/rgis/datasets/
b030ab7b-86e3-4c30-91c0-f427303d5c77/
services/ogc/wms?
    VERSION=1.1.1&&
    SERVICE=WMS&
    REQUEST=GetMap&
    SRS=EPSG:4326&
    FORMAT=image/jpeg&
    STYLES=&
    LAYERS=bernalillo_tm2011&
    TRANSPARENT=TRUE&
    WIDTH=521&
    HEIGHT=200&
    bbox=-107.207,34.8404,-106.143,35.2487

OGC Web Feature Services (WMS) Characteristics

OGC Web Feature Services (WFS) Characteristics

OGC Web Coverage Services (WCS) Characteristics

OGC Geography Markup Language (GML)

OGC KML

Implementation of the OGC Standards

Implementation information based upon OGC Implementation Statistics - Accessed 2/2016

Implementation of the OGC Standards

Implementation information based upon OGC Implementation Statistics - Accessed 2/202016

OGC Summary

The OGC web service specifications support key geospatial data access requirements

WMS
visualization of geospatial data through simple web requests
WFS
delivery of geospatial data (typically points, lines, and polygons) in a format that is usable in GIS and other applications
WCS
delivery of geospatial data (typically, but not limited to, raster data) usable in other applications

OGC Summary

The OGC data and representation standards support data exchange and higher level representation

GML
XML schema for the representation of features and associated attributes. It may be extended for use by specific communities of users (i.e. ecological data models)
KML
XML schema that supports the combination of embedded data and external data into a complete representation model that may be used by client applications to present the data through a user interface (e.g. Google Earth, WorldWind)
Creative Commons License
This work by Karl Benedict is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.